
/**
 * 拖拽 dialog 的函数，目前支持 element-plus
 */
export default function dialogDrag () {
  /**
   * 设置拖拽事件
   * @param {*} container 大容器，比如蒙版。
   * @param {*} dialog 被拖拽的窗口
   * @param {*} dialogTitle 拖拽的标题
   * @param {*} width 宽度
   */
  const setDialog = (container, dialog, dialogTitle, width) => {
    // 可视窗口的宽度
    const clientWidth = document.documentElement.clientWidth
    // 可视窗口的高度
    const clientHeight = document.documentElement.clientHeight

    // 计算百分数
    let tmpWidth = width // binding.value.replace('%', '') //
    tmpWidth = clientWidth * (100 - tmpWidth) / 200

    const domset = {
      x: tmpWidth,
      y: clientHeight * 15 / 100 // 根据 15vh 计算
    }

    // 重新设置上、左距离
    dialog.style.marginTop = domset.y + 'px'
    dialog.style.marginLeft = domset.x + 'px'

    // 记录拖拽开始的光标坐标，0 表示没有拖拽
    const start = { x: 0, y: 0 }
    // 移动中记录偏移量
    const move = { x: 0, y: 0 }

    // 经过时改变鼠标指针形状
    dialogTitle.onmouseover = (e) => {
      dialogTitle.style.cursor = 'move' // 改变光标形状
    }

    // 鼠标按下，开始拖拽
    dialogTitle.onmousedown = (e) => {
      // 判断对话框是否重新打开
      if (dialog.style.marginTop === '15vh') {
        // 重新打开，设置 domset.y  top
        domset.y = clientHeight * 15 / 100
      }
      start.x = e.clientX
      start.y = e.clientY
      dialogTitle.style.cursor = 'move' // 改变光标形状
    }

    // 鼠标移动，实时跟踪 dialog
    container.onmousemove = (e) => {
      if (start.x === 0) { // 不是拖拽状态
        return
      }
      move.x = e.clientX - start.x
      move.y = e.clientY - start.y

      // 初始位置 + 拖拽距离
      dialog.style.marginLeft = (domset.x + move.x) + 'px'
      dialog.style.marginTop = (domset.y + move.y) + 'px'
    }
    
    // 鼠标抬起，结束拖拽
    container.onmouseup = (e) => {
      // alert(start.x)
      if (start.x === 0) { // 不是拖拽状态
        return
      }
      move.x = e.clientX - start.x
      move.y = e.clientY - start.y

      // 记录新坐标，作为下次拖拽的初始位置
      domset.x += move.x
      domset.y += move.y
      dialogTitle.style.cursor = ''
      dialog.style.marginLeft = domset.x + 'px'
      dialog.style.marginTop = domset.y + 'px'
      // 结束拖拽
      start.x = 0
 
    }
  }

  const unload = (container, dialogTitle) => {
    dialogTitle.onmouseover = null
    dialogTitle.onmousedown = null
    container.onmousemove = null
    container.onmouseup = null
  }

  return {
    setDialog, // 设置
    unload // 卸载，移除事件
  }
}